import { INSTALLED_APPLICATION_CLASS_IDENTIFIER, PROJECT_APPLICATION_CLASS_IDENTIFIER } from "@/services/constants";
import { ComparsionOperator, dsFindOne, InstalledApplication, ProjectApplication, ProjectApplicationType } from "@/services/local";
import { FC, useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import styled from 'styled-components';

import ApplicationAgentPage from "./agent";
import ApplicationH5Page from "./h5";
import { TopHeader } from "@/components";
import { Button } from "antd";
import { LeftOutlined } from "@ant-design/icons";



export interface ApplicationPageProps {

}

export const ApplicationPage: FC<ApplicationPageProps> = (props) => {

    const params = useParams();

    const navigate = useNavigate();

    const [projectApplication, setProjectApplication] = useState<InstalledApplication | ProjectApplication | null>(null);

    const [activeKey, setActiveKey] = useState<string>('');

    useEffect(() => {
        if (params.installed && params.installed === 'true') {
            dsFindOne(0, INSTALLED_APPLICATION_CLASS_IDENTIFIER, {
                attributes: [
                    {
                        name: 'identifier',
                        operator: ComparsionOperator.Equal,
                        value: params.identifier
                    }
                ]
            }).then((app) => {
                console.log(app);
                setProjectApplication(app);
            }).catch((err) => {
                console.error(err);
            });

        } else {
            dsFindOne(0, PROJECT_APPLICATION_CLASS_IDENTIFIER, {
                attributes: [
                    {
                        name: 'identifier',
                        operator: ComparsionOperator.Equal,
                        value: params.identifier
                    }
                ]
            }).then((app) => {
                console.log(app);
                setProjectApplication(app);
            }).catch((err) => {
                console.error(err);
            });
        }
    }, [params.installed, params.identifier]);

    if (!projectApplication) {
        return (
            <></>
        );
    }

    let content = (
        <>
            应用类型不支持！{projectApplication.application_type}
        </>
    );

    if (projectApplication.application_type === ProjectApplicationType.Agent) {
        content = (
            <ApplicationAgentPage application={projectApplication}></ApplicationAgentPage>
        );
    } else if (projectApplication.application_type === ProjectApplicationType.CustomH5) {
        content = (
            <ApplicationH5Page application={projectApplication}></ApplicationH5Page>
        );
    }

    if (params.installed && params.installed.toLocaleLowerCase() === 'true') {
        return (
            <>
                {content}
            </>
        );
    } else {
        return (
            <Container>
                <Header>
                    <TopHeader leftButton={<Button type={'text'} onClick={async () => {
                        navigate('/workspaces');
                    }}><LeftOutlined /></Button>} items={[
                        {
                            key: projectApplication?.identifier,
                            label: projectApplication?.title

                        }
                    ]} activeKey={activeKey} onChange={async (key: string) => {
                        setActiveKey(key);
                    }}></TopHeader>
                </Header>
                <Content>
                    {content}
                </Content>
            </Container>
        );
    }
}
const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;
const Header = styled.div`
    min-height: 45px;
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;

const Content = styled.div`
    flex:  1;
    width: 100%;
    overflow: hidden;
`;

export default ApplicationPage;